(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "ace_editor/ace", "react", "common", "maishu-jueying", "../../controls/ue.ext"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    // import { Editor, EditorProps } from "components/editor";
    // import { State as ControlState, default as CategoriesControl } from 'components/html/control';
    // import { guid } from "share/common";
    // import UE = require('admin/ue.ext');
    // import ace = require('ace_editor/ace');
    require("ace_editor/ace");
    const React = require("react");
    const common_1 = require("common");
    const maishu_jueying_1 = require("maishu-jueying");
    const UE = require("../../controls/ue.ext");
    class HtmlEditor extends maishu_jueying_1.PropEditor {
        constructor(props) {
            super(props);
            // this.loadEditorCSS();
            this.editorId = common_1.guid();
            this.state = { type: 'rich' };
        }
        setCheckElement(e) {
            if (!e || e.onchange)
                return;
            // e.checked = this.state[member] == e.value;
            e.checked = this.state.type == e.value;
            e.onchange = () => {
                // this.state[member] = e.value;
                // this.setState(this.state);
                this.setState({ type: e.value });
            };
        }
        loadTextEditor(e) {
            if (!e)
                return;
            let ace = window['ace'];
            this.editor = ace.edit(e);
            this.editor.setTheme("ace/theme/chrome");
            this.editor.session.setMode("ace/mode/html");
            this.editor.setValue(this.props.value || '');
        }
        loadRichEditor(e) {
            if (!e)
                return;
            UE.createEditor(this.editorId, e, (content) => {
                this.props.updateComponentProp(content);
            });
        }
        apply() {
            if (this.state.type == 'source' && this.editor != null) {
                // this.state.html = this.editor.getValue();
                // this.setState(this.state);
                this.props.updateComponentProp(this.editor.getValue());
            }
        }
        componentDidMount() {
            setTimeout(() => {
                if (this.richEditorElement)
                    this.loadRichEditor(this.richEditorElement);
                if (this.sourceEditorElement)
                    this.loadTextEditor(this.sourceEditorElement);
            });
        }
        render() {
            let { type } = this.state || {};
            let { value } = this.props;
            value = value || "";
            return React.createElement(React.Fragment, null,
                React.createElement("div", { key: "richEditor", className: "form-group", style: { display: type == 'rich' ? 'block' : 'none' } },
                    React.createElement("script", { id: this.editorId, type: "text/html", dangerouslySetInnerHTML: { __html: this.props.value || '' } }),
                    React.createElement("input", { type: "hidden", value: value, ref: (e) => this.richEditorElement = e || this.richEditorElement })),
                React.createElement("div", { key: "sourceEditor", className: "form-group", style: { display: type == 'source' ? 'block' : 'none' } },
                    React.createElement("pre", { style: { height: 400 }, ref: (e) => this.sourceEditorElement = e || this.sourceEditorElement })),
                React.createElement("div", { key: "type", className: "form-group" },
                    React.createElement("button", { type: "button", className: "btn btn-primary", onClick: () => this.apply() }, "\u5E94\u7528\u5F53\u524DHTML"),
                    React.createElement("div", { className: "pull-right" },
                        React.createElement("span", { style: { paddingRight: 10 } },
                            React.createElement("input", { type: "radio", name: "type", value: "rich", ref: (e) => this.setCheckElement(e) }),
                            "\u5BCC\u6587\u672C"),
                        React.createElement("span", null,
                            React.createElement("input", { type: "radio", name: "type", value: "source", ref: (e) => this.setCheckElement(e) }),
                            "\u6E90\u7801"))));
        }
    }
    exports.HtmlEditor = HtmlEditor;
});
